
<template>
  <div class="box">
    标题
    <input
      v-model="FormData.title"
      class="title"
      type="text"
      placeholder="请输入代办标题"
    />
    日期
    <input
      v-model="FormData.date"
      class="date"
      type="date"
      placeholder="请选择日期"
    />
    <br />
    <button @click="handleSubmit">提交</button>
    <br />
    <button @click="handleAdd">添加</button>
  </div>
  <!-- 表格部分 -->
  <table>
    <!-- 表头 -->
    <thead class="head">
      <tr>
        <th>标题</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- body -->
    <tbody class="container" @scroll="onScroll">
      <div class="scroll" :style="{ height: lists.length * 30 + 'px' }">
        <div
          class="placeholder"
          :style="{ height: currentIndex * 30 + 'px' }"
        ></div>
        <tr v-for="(item, index) in displayArr" :key="item" style="height:30px">
          <td>{{ item.title }}</td>
          <td>{{ item.date }}</td>
          <td>
            <button @click="handleDelete(index)">删除</button>
            <button @click="handleChange(index)">修改</button>
          </td>
        </tr>
      </div>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      FormData: {
        title: "",
        date: "",
      },
      currentIndex: 0,
      lists: [],
    };
  },
  created() {
  },
  computed: {
    displayArr() {
      return this.lists.slice(this.currentIndex, this.currentIndex + 10);
    },
  },
  mounted() {
    this.lists = JSON.parse(localStorage.getItem("lists")) || [];
  },
  methods: {
    handleSubmit() {
        if(!this.FormData.title || !this.FormData.date) return alert('请填写完整');
      this.lists.push(this.FormData);
      localStorage.setItem("lists", JSON.stringify(this.lists));
      this.FormData = {};
    },
    handleAdd() {
      console.log("添加");
    },
    handleDelete(index) {
      //删除掉当前的这一项
      this.lists.splice(index, 1);
      localStorage.setItem("lists", JSON.stringify(this.lists));
    },
    handleChange(index) {
      //修改当前的这一项
      this.FormData = this.lists[index];
      this.handleSubmit=()=>{
        this.lists[index] = this.FormData;
        localStorage.setItem("lists", JSON.stringify(this.lists));
        this.FormData = {};
      }

    },
    onScroll(e) {
      const scrollTop = e.target.scrollTop;
      this.currentIndex = Math.floor(scrollTop / 30);
      console.log(this.currentIndex);
    },
  },
};
</script>

<style lang="less">
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  border: 1px solid #ccc;
}
.container {
  overflow-x: hidden;
  overflow-y: auto;
  height: 300px;
  display: block;
}
.head,
.container tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
  th {
    border: 1px solid #ccc;
  }
  td {
    border: 1px solid #ccc;
  }
}
table tbody::-webkit-scrollbar {
  width: 5px;
}
table tbody::-webkit-scrollbar-thumb {
  background-color: pink;
  border-radius: 5px;
}
table tbody::-webkit-scrollbar-track {
  background-color: #d6d6d6;
}
table tbody::-webkit-scrollbar-thumb:hover {
  background-color: rgb(236, 112, 166);
}
</style>
